<template>
  <div>
    <div class="user-container" v-if="userInfo">
      <div class="user-header">
        <div class="user-info">
          <img v-if="userInfo.avatar_url" :src="userInfo.avatar_url"/>
          <img v-else src="../../assets/images/user/user.png"/>
          <span>{{userInfo.full_name}}</span>
        </div>
        <van-cell :value=userInfo.full_name icon="point-gift-o" to="/invite" title="超级返利" link-type="navigateTo" is-link/>
      </div>
      <div class="menu-link">
        <van-cell-group>
          <van-cell class="menu-cell" icon="exchange" title="交易规则" to="/article/1" is-link />
          <van-cell class="menu-cell" icon="question-o" title="常见问题" to="/common" is-link />
          <!--<van-cell class="menu-cell" icon="service-o" title="关于" to="/help" is-link />-->
          <van-cell class="menu-cell" icon="close" title="退出登录" to="/account" is-link />
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { Cell, CellGroup, Row, Col } from 'vant'

export default {
  name: 'user',
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Row.name]: Row,
    [Col.name]: Col
  },
  data () {
    return {
      userInfo: null
    }
  },
  async mounted () {
    this.setActiveTab(3)
    this.getUserInfo()
  },
  methods: {
    ...mapMutations({
      setActiveTab: 'tabbar/setActiveTab'
    }),
    getUserInfo () {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      console.log(this.userInfo)
    }
  }
}
</script>

<style scoped lang="less">
  .user-title{
    padding: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    border-bottom: solid #eae3e3 0.02rem;
  }
  .user-container{
    font-size: 14px;
    background-color: #80808012;
    .user-header{
      background-color: white;
      /*padding: 20px;*/
      margin-bottom: 10px;
      .user-info{
        padding: 20px;
        margin-bottom: 15px;
        img{
          float: left;
          border-radius: 50px;
          width: 45px;
        }
        span{
          float: left;
          color: #ffa700;
          font-size: 20px;
          font-weight: 600;
          margin: 15px;
        }
      }
    }
  }
</style>
